<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>新建流程</title>
    <#include "/pubHeadStyleTree.html">

</head>
<body>

<div style="position: relative;height: 100%;">
    <div class="ccpui-trees" >
        <p class="isShowTree colorSwitch">
            <span style="float: left;color: #fff">&nbsp;&nbsp;新建流程</span>
            <i layadmin-event="treeFlexible" class="layui-icon layui-icon-prev"></i>
        </p>
        <div style="margin-top: 6px;" >
            <ul class="ccpui-iconTree iconTrees">
                <li><a class="iconfont iconshuaxin- zTree-refresh" title="刷新"></a></li>
                <li><a class="iconfont iconwenjianjia1-copy zTree-triangle-d" title="展开"></a></li>
                <li><a class="iconfont iconfolder1 zTree-triangle-r" title="收起"></a></li>
                <input type="text" style="width: 50%" class="catZtreeValue">
            </ul>
            <ul id="treeSelectGlobalType" class="ztree ccpui-listZtree"></ul>
        </div>
    </div>
    <div class="ccpui-coreContent" style="position: absolute;top:10px;right:10px;bottom: 0;left: 250px">
        <table id="newProcess" lay-filter="newProcess" ></table>
    </div>
</div>

<!--表格序列号-->
<script type="text/html" id="serialNum">
{{d.LAY_TABLE_INDEX + 1}}
</script>
<!--点击流程名称-->
<script type="text/html" id="titleTpl">
    <a href= "javaScript:void(0)" onclick="flowUtil.startFlow('{{d.id}}')" class="layui-table-link">{{d.name}}</a>
</script>

<script type="text/html" id="headerToolsBar">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-sm" lay-event="query">
            <i class="layui-icon layui-icon-search"></i>
            <span>查询</span>
        </a>
        <a class="layui-btn layui-btn-sm" lay-event="reset">
            <i class="layui-icon layui-icon-refresh"></i>
            <span>重置</span>
        </a>
    </div>
    <form class="layui-form" action="" lay-filter="newProcessQueryForm" style="margin-top:10px">
        <div class="table-top-filter">
            <div class="table-filter-alone">
                <label class="layui-form-label">流程名称</label>
                <input type="text" name="Q_name_SL" id="processName" class="layui-input filter-value" placeholder="流程名称"/>
            </div>
        </div>
    </form>
</script>

<script src="${ctx}/workflowStatic/js/flowUtil.js"></script>

<script>
    layui.config({
        base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index','table', 'layer', 'form','commons','setter','totalFilter','common'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.$;
        var setter = layui.setter;
        var commons = layui.commons;
        var common = layui.common;
        var totalFilter = layui.totalFilter;

        var tableH=commons.tabHeight();

        catZtree();
        loadTable(serverPath.workflowPath + setter.workflowLinkPath + 'task/list/newProcess');

        function catZtree() {
            $.ajax({
                url: serverPath.workflowPath + setter.workflowLinkPath + "task/processType/list",
                type: "post",
                dataType: 'json',
                data: {"catKey": "FLOW_TYPE", "hasRoot": 1},
                success: function (data) {
                    var zNodes = data.data;
                    var setting = {
                        view: {
                            showLine: false,
                            nameIsHTML: true, //允许name支持html
                            selectedMulti: false
                        },
                        edit: {
                            enable: false,
                            editNameSelectAll: false
                        },
                        data: {
                            simpleData: {
                                enable: true,
                                idKey: "typeId",
                                pIdKey: "parentId"

                            },
                            key: {
                                name: "typeName"
                            }
                        },

                        callback: {
                            onClick: onClickType
                        }
                    };
                    $.fn.zTree.init($('#treeSelectGlobalType'), setting, zNodes);
                    component.fuzzySearch('treeSelectGlobalType', '.catZtreeValue', null, true); //初始化模糊搜索方法
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert("暂无数据，请稍后操作！" + XMLHttpRequest.status);
                }
            });
        }
        //点击流程类型
        function onClickType(event, treeId, treeNode) {
            var selectTypeId = treeNode.typeId;
            var nodePath = treeNode.nodePath;
            var url = serverPath.workflowPath + setter.workflowLinkPath + 'task/list/newProcess?typeId=' + selectTypeId + "&nodePath=" + nodePath;
            if (null == treeNode.parentId) {
                url = serverPath.workflowPath + setter.workflowLinkPath + 'task/list/newProcess';
            }
            loadTable(url);
        }

        //展开
        $(".iconTrees .zTree-triangle-d").click(function () {
            $.fn.zTree.getZTreeObj("treeSelectGlobalType").expandAll(true);
        });
        //收起
        $(".iconTrees .zTree-triangle-r").click(function () {
            $.fn.zTree.getZTreeObj("treeSelectGlobalType").expandAll(false);
        });
        //刷新
        $(".iconTrees .zTree-refresh").click(function () {
            catZtree();
        });

        //第一个实例
        function loadTable(url){
            table.render({
                  elem: '#newProcess'
                , cellMinWidth: 80
                , title: '流程信息'
                , height: tableH
                , url: url
                , method: 'post'
                , toolbar: '#headerToolsBar'
                , page: true
                , cols: [[
                      {field: 'id', title: '序号',align: 'center',width:80,templet: '#serialNum'}
                    , {field: 'name', title: '流程名称', sort: true, align: 'center',templet:'#titleTpl'}
                    , {field: 'typeName', title: '类型名称', sort: true, align: 'center'}
                    , {field: 'version', title: '版本', align: 'center',width:80}
                ]]
            });
            totalFilter.init('newProcess');
        }
        table.on('toolbar(newProcess)', function (obj) {

            switch (obj.event) {
                case 'query':
                    common.tableConditionRender("newProcess","newProcessQueryForm",{where:{}},false);
                    break;
                case 'reset':
                    common.tableConditionRender("newProcess","newProcessQueryForm",{where:{}},true);
                    break;
            }
        });
        //监听排序，实现后台排序
        table.on('sort(newProcess)', function(obj){
            table.reload('newProcess', { //testTable是表格容器id
                where: {
                    orderField: obj.field //排序字段
                    ,orderSeq: obj.type //排序方式
                }
            });
        });
    });

</script>

<style>
    #treeSelectGlobalType{
        position: absolute;
        background: #fff;
        bottom:0px;
        top:70px;
        right: 0;
        left: 0;
        overflow: auto;
    }
    .table-top-filter div {
        display: inline-block;
    }

    .table-top-filter .layui-form-label {
        width: 72px;
    }

    .table-top-filter div input {
        border-radius: 4px;
        float: left;
        width: 160px;
    }

    .table-top-filter label.layui-form-label {
        width: 108px;
        float: left;
    }
    .layui-table-tool-self {
        display: none;
    }

    .tablesize .layui-table-view {
        margin-right: 10px;
    }

    .layui-form-label {
        width: 90px;
    }

    .layui-form-item .layui-i nput-inline {
        width: 103px;
    }

    .tree-toolbar i {
        padding-right: 10px;
    }


    div#catRightMenus ul li {
        margin: 5px 0;
        padding: 0 8px;
        cursor: pointer;
        list-style: none outside none;

    }

    /* ztree */
    .trees .iconTrees {
        width: 100%
    }

    .trees .iconTrees li {
        display: inline-block;
        margin: 6px 4px;
        cursor: pointer;
    }

    .trees {
        width: 240px;
        float: left;
    }

</style>
</body>
</html>